<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/base.css" rel="stylesheet"/>
    <title>选择班级</title>
    <style>
        li {
            list-style-type: none;
        }

        ul {
            padding-left: 0;
            margin-left: 0;
        }

        /*
          选择班级父节点
        */
        #class_parent {
            overflow: hidden;
            margin-left: 10px;
            clear: both;
            padding: 10px 0px;
        }

        /*
          选择班级子节点
         */
        #class_child {
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-left: 10px;
        }

        /*
          打开角标图片 朝向右边
        */
        #img_right {
            height: 20px;
            width: 20px;
            float: right;
            margin: 0px 10px;
        }

        /*
          打开角标图片 朝向下边
        */
        #img_down {
            height: 20px;
            width: 20px;
            float: right;
            margin:  0px 10px;
        }

        /*
        父节点全选按钮
        */
        #class_parent .check_all {
            height: 20px;
            width: 20px;
            float: right;
            margin-right: 10px;
        }

        /*
        子节点单选按钮
        */
        #class_child img {
            height: 20px;
            width: 20px;
            float: right;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 10px;
        }

        header label {
            width: 56px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            overflow: hidden;
            color: #FFFFFF;

        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav base_style_color" style="padding: 22px 0 0;height:66px">
    <label onclick="api.closeWin()">
        取消
    </label>
    <h1 class="mui-title" style="color: #FFFFFF">选择班级</h1>
    <label style="float: right" onclick="complete()">
        完成
    </label>
</header>
<div id="app" style="margin-top: 66px;">

    <div v-if="!network" class="loadFailure">
        <img src="../../image/icon_img01.png" width="60%">
        <p class="">
            数据加载失败
        </p>
        <p>
            请检查您的网络
        </p>
        <button type="button" class="mui-btn mui-btn-outlined" v-on:click="refreshData()">
            重新加载
        </button>
    </div>
    <div v-else>
        <div v-if="class_name.length < 1" class="noSign">
            <img src="../../image/icon_img.png" width="60%">
            <p class="font16 top_15 base_dark_grey">
                暂无数据
            </p>
        </div>
        <div v-else>
            <ul>
                <li v-for="(c , index) in class_name" class="base_gary_bg_color">
                    <div id="class_parent" v-on:click="itemClick(index)">
                        <label style="float: left;width: 80%;">

                            {{c.title}}
                         <!--   超级无敌长的班级名字是什超级无敌长的班级名字是什超级无敌长的班级名字是什-->

                        </label>
                        <label v-show="c.two.length > 0" style="float: right">
                            <img v-if="c.state" id="img_down" src="../../icon/icon_select_open_down.png">
                            <img v-else id="img_right" src="../../icon/icon_select_open_right.png">
                        </label>
                        <img v-if="c.check_all" class="check_all" src="../../icon/icon_select.png"
                             v-on:click.stop="checkAll(index)">
                        <img v-else class="check_all" src="../../icon/icon_unselect.png"
                             v-on:click.stop="checkAll(index)">
                    </div>
                    <div class="div_divider"></div>
                    <div v-show="c.state">
                        <ul>
                            <li v-for="(item , i_index) in c.two"
                                style="background-color:#FFFFFF;">
                                <div id="class_child" v-on:click.stop="childClick(index,i_index)">
                                    <label>
                                        {{item.title}}
                                    </label>
                                    <img v-if="item.state" src="../../icon/icon_select.png">
                                    <img v-else="item.state" src="../../icon/icon_unselect.png">
                                </div>
                                <div class="div_divider"></div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript">

    var selectClass = [];


    var data = [];
    var app = new Vue({
        el: '#app',
        data: {
            class_name: data,
            message: 'Hello Vue!',
            network: true
        },
        methods: {
            itemClick: function (index) {//父节点点击事件 ,展开子班级
                data[index].state = !data[index].state;
            },
            childClick: function (index, childClick) {//子班级选择
                data[index].two[childClick].state = !data[index].two[childClick].state;
                /*var sum = 0;
                //统计全选的个数
                for (var i = 0; i < data[index].two.length; i++) {
                    if (data[index].two[i].state) {
                        sum++;
                    }
                }
                //如果子项全选就设置大项全选
                data[index].check_all = sum >= data[index].two.length;*/
            },
            checkAll: function (index) {//全选  取消全选
                //点击全选打开子节点
                data[index].state = true;
                //全选 取消全选状态切换
                data[index].check_all = !data[index].check_all;
                for (var i = 0; i < data[index].two.length; i++) {
                    data[index].two[i].state = data[index].check_all;
                }

            },
            refreshData: function () {//从新加载数据
                loadData();
            }
        }
    });

    /*
     * 完成按钮
     * */
    function complete() {
        var select = [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].check_all) {
                select.push({
                    id: data[i].id,
                    name: data[i].title
                });
            }
            for (var j = 0; j < data[i].two.length; j++) {
                var c = data[i].two[j];
                if (c.state) {
                    select.push({
                        id: c.id,
                        name: c.title
                    });
                }
            }
        }

        //发送数据
        api.sendEvent({
            name: 'refreshClassData',
            extra: {data: select}
        });
        //关闭页面
        api.closeWin();
    }

    apiready = function () {
        loadData();
    };

    function notNetwork(network) {
        app.network = network;
    }

    /*
     * 获取班级信息
     * */
    function loadData() {
        selectClass = api.pageParam.data;
        var jid = $api.getStorage('cfnetppjxid');
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '正在获取班级',
            text: '请稍候...',
            modal: true
        });

        var params = {
            jid: jid
        };

        //获取服务器班级列表
        cfnetppPOST(url_class_list, params, false, function (datas, status) {
            api.hideProgress();
            if (status === 'success') {
                notNetwork(true);
                for (var i = 0; i < datas.data.list.length; i++) {
                    //添加两个 控制页面显示的变量
                    datas.data.list[i].check_all = false;
                    datas.data.list[i].state = false;
                    //之前选择的数据个数
                    var selecCount = 0;
                    for (var k = 0; k < selectClass.length; k++) {
                        if (selectClass[k].id == datas.data.list[i].id) {
                            datas.data.list[i].check_all = true;
                            datas.data.list[i].state = true;
                        }
                    }
                    if (datas.data.list[i].two) {
                        for (var j = 0; j < datas.data.list[i].two.length; j++) {
                            //判断是否选中
                            datas.data.list[i].two[j].state = false;
                            for (var k = 0; k < selectClass.length; k++) {
                                if (selectClass[k].id == datas.data.list[i].two[j].id) {
                                    datas.data.list[i].two[j].state = true;
                                    selecCount++;
                                }
                            }
                        }
                    } else {
                        //如果没有数组则给一个空
                        datas.data.list[i].two = [];
                    }
                    if (selecCount != 0 && selecCount === datas.data.list[i].two.length) {//如果子项全部选择
                        datas.data.list[i].check_all = true;//就把父选项选择
                        datas.data.list[i].state = true;
                    }
                    //添加数组
                    data.push(
                        datas.data.list[i]
                    );
                }
            } else {
                notNetwork(false);
                api.toast({
                    msg: '网络异常!'
                });
            }
        });
    }
</script>
</html>